// @flow
import { sendVerifyCode } from '@/services/home/api';
import { qqBindingCode, qqCancel, qqLogin } from '@/services/user';
import { ModalForm, PageContainer, ProFormCaptcha } from '@ant-design/pro-components';
import { history } from '@umijs/max';
import { Card, message } from 'antd';
import * as React from 'react';
import styles from './index.less';
type Props = {};
const Index: React.FC<Props> = () => {
  // 解绑QQ号
  const qqCancelHandler = async () => {
    const { code, message: msg } = await qqCancel();
    if (code === 200) {
      message.success('解绑成功!');
    } else {
      message.error(msg);
    }
  };

  // 绑定QQ号
  const bindingQQ = async () => {
    const res = await qqLogin();
    localStorage.setItem('processMode', 'qqbind');
    window.open(res.data);
  };
  return (
    <PageContainer title="账号设置">
      <Card style={{ minHeight: '60vh' }}>
        <div className={styles.listItem}>
          <div className={styles.left}>
            <div className={styles.label}>手机</div>
            <div className={styles.value}>175525554444</div>
          </div>
          <a
            className={styles.right}
            onClick={() => {
              history.push('/admin/user/account/bindingtel');
            }}
          >
            换绑
          </a>
        </div>
        <div className={styles.listItem}>
          <div className={styles.left}>
            <div className={styles.label}>微信</div>
            <div className={styles.value}>英雄在哪</div>
          </div>
          <a className={styles.right}>解绑</a>
        </div>
        <div className={styles.listItem}>
          <div className={styles.left}>
            <div className={styles.label}>QQ</div>
            <div className={styles.value}>止于此</div>
          </div>
          {/* <a
            className={styles.right}
            onClick={() => {
              qqCancelHandler();
            }}
          >
            解绑
          </a> */}
          <ModalForm
            width={450}
            modalProps={{
              destroyOnClose: true,
            }}
            title="验证安全手机"
            trigger={<a className={styles.right}>绑定</a>}
            onFinish={async (values) => {
              const { code, message: msg } = await qqBindingCode({
                mobile: '17344995867',
                ...values,
              });
              if (code === 200) {
                bindingQQ();
              } else {
                message.error(msg);
              }
              return true;
            }}
            colon
            layout="horizontal"
          >
            <p className={styles.subTitle}>验证码将发送到手机 173****5867</p>
            <p className={styles.hint}> 如果长时间未收到验证码，请检查是否将运营商拉黑</p>
            <ProFormCaptcha
              labelAlign="left"
              width="md"
              name="code"
              label="填写验证码"
              placeholder="验证码四位"
              rules={[
                {
                  required: true,
                  message: '请输入验证码！',
                },
              ]}
              onGetCaptcha={async () => {
                const { code, message: msg } = await sendVerifyCode('17344995867');
                if (code === 200) {
                  message.success('获取验证码成功!');
                } else {
                  message.error(msg);
                }
              }}
              captchaTextRender={(timing, count) => {
                if (timing) {
                  return `${count} ${'获取验证码'}`;
                }
                return '获取验证码';
              }}
            />
          </ModalForm>
        </div>
        <div className={styles.listItem}>
          <div className={styles.left}>
            <div className={styles.label}>GitHub</div>
            <div className={styles.value}>未绑定</div>
          </div>
          <a className={styles.right}>绑定</a>
        </div>
        <div className={styles.listItem}>
          <div className={styles.left}>
            <div className={styles.label}>密码</div>
          </div>
          <a className={styles.right}>重置</a>
        </div>
        <div className={styles.listItem}>
          <div className={styles.left}>
            <div className={styles.label}>账号</div>
          </div>
          <a className={styles.right}>注销</a>
        </div>
      </Card>
    </PageContainer>
  );
};
export default Index;
